<template>
	<div class="pagesListcont">
		<div class="listItems" v-for="(ite,idx) in list" :key="idx">
			<div class="listItems_title">
				<div class="listItems_title_left">
					{{ite.type}}
				</div>
				<div class="listItems_title_right" :class="'roomColor'+ite.status">
					{{ite.status | statusFilterSB}}
				</div>
			</div>
			<div class="listItems_cont">
				<p>发起人：{{ite.name || ''}}</p>
				<p>预约时间：{{ite.time || ''}}</p>
				<p>处理地点：{{ite.address || ''}}</p>
				<p>创建时间：{{ite.addtime || ''}}</p>

				<div class="itePoint" v-if='ite.point'>
					<u-rate active-color="#FFBE2E" inactive-color="#F1E5D8" size='20' readonly gutter="5"
						v-model="ite.point || 5"></u-rate>
				</div>
			</div>
			<div class="listItems_bz" v-if='ite.remark'>
				备注：{{ite.remark || ''}}
			</div>
			<!-- btn -->
			<div class="listItems_btn" v-if='userStatus == 0 || userStatus== 1'>
				<div class="listItems_btn_qx btn" @click='quxiaoEvent(ite.work_id,ite)' v-if="ite.status == 1 ">
					取消预约
				</div>
				<div class="listItems_btn_zj btn" @click='pjshowEvent(ite.work_id,ite)' v-if="ite.status == 2">
					评价
				</div>
				<!-- <div class="listItems_btn_cl btn" @click='quxiaoEvents(ite.work_id,ite)' v-if="ite.status !==1">
					处理
				</div> -->
			</div>

			<div class="listItems_btn" v-else>
				<div class="listItems_btn_qx btn" @click='quxiaoEvent(ite.work_id,ite)' v-if="ite.status == 1">
					驳回
				</div>
				<div class="listItems_btn_zj btn" @click='zjEvent(ite.work_id,ite)' v-if="ite.status==1">
					转交
				</div>
				<div class="listItems_btn_cl btn" @click='quxiaoEvents(ite.work_id,ite)' v-if="ite.status ==1 && ite.type=='设施报修'">
					处理
				</div>
				<div class="listItems_btn_cl btn" @click='quxiaoEventss(ite.work_id,ite)' v-if="ite.status ==1 && ite.type!='设施报修'">
					处理
				</div>
			</div>
		</div>

		<u-modal :show="show || showS" @confirm="confirm" :title='modalTitle' @cancel='cancelEvent' ref="uModal"
			showCancelButton></u-modal>
		<frools v-if="froolShow" :froolShow='froolShow' :isCen='2' @confirm='FroolConfirm' @cancel='froolShow=false'
			:isNick='true'>
		</frools>

		<div class="mask" @click='pjshow=!pjshow' v-if="pjshow">
			<div class="Evaluation_bottom">
				<div class="Evaluation_bottom_title">
					服务评价
				</div>
				<div class="Evaluation_bottom_sub">
					请评价下苏江服务体验吧～
				</div>
				<div class="Evaluation_bottom_line">

				</div>
				<div class="Evaluation_bottom_str">
					<u-rate active-color="#FFBE2E" @change='pointChange' inactive-color="#F1E5D8" size='35' gutter="5"
						v-model="point"></u-rate>
				</div>
				<div class="Evaluation_bottom_text">
					<!-- {{evaTitle}} 感谢评价-->
				</div>


				<div class="Evaluation_bottom_btn" @click.stop='sendEvnet()'>
					确认评价
				</div>
			</div>

		</div>

		<!--处理 -->
		<div class="mask masks" v-if='showCL' @click='showCL=!showCL'>
			<div class="Evaluation_bottom Evaluation_bottoms">

				<div class="invite_cont_time">
					上门时间服务
				</div>
				<div class="invite_cont_items" @click.stop='tiemEvent()'>
					{{time?time:'请选择上门时间服务'}}
					<u-icon slot="right" name="arrow-right" color='#6D6D6D'></u-icon>
				</div>
				<div class="invite_cont_yy" @click.stop='showCL = true'>
					<textarea v-model='remark' placeholder="请填写备注(最多50字)" />
				</div>
				<div class="invite_cont_btn" @click.stop='inviteSureEvnet()'>
					确认
				</div>
			</div>

		</div>

		<u-calendar :show="showCLTime" :mode="mode" @confirm="confirmTime" @close='showCLTime=false'></u-calendar>
	</div>
</template>

<script>
	import frools from '@/pages/server/components/frools.vue'

	export default {
		components: {
			frools
		},
		// 1待处理 2已处理 3已转交 4已取消 5已评价
		props: {
			list: [Array, String, Number]
		},
		filters: {
			statusFilterSB(v) {
				var s = ''
				// 1可预定 2待入驻 3已入住 4待搬离 5未保洁
				switch (v) {
					case '1':
						s = '待处理'
						break;
					case '2':
						s = '已处理'
						break;
					case '3':
						s = '已转交'
						break;
					case '4':
						s = '已取消'
						break;
					case '5':
						s = '已评价'
						break;
					case '6':
						s = '已评价'
						break;
				}
				return s
			}
		},
		data() {
			return {
				mode: 'single',
				modalTitle: '',
				show: false,
				work_id: '',
				froolShow: false,
				userStatus: '',
				showS: false,
				pjshow: false,
				evaTitle: '超赞',
				point: 5,
				showCL: false,
				showCLTime: false,
				remark: '', //备注
				time: '',
			}
		},
		mounted() {
			this.userStatus = uni.getStorageSync('userStatus')
		},
		methods: {
			pointChange(change) {

				switch (change) {
					case 1:
						this.evaTitle = '非常差'
						break;
					case 2:
						this.evaTitle = '差'
						break;
					case 3:
						this.evaTitle = '一般'
						break;
					case 4:
						this.evaTitle = '满意'
						break;
					case 5:
						this.evaTitle = '超赞'
						break;

				}
				console.log('pointChangepointChange', change)
			},
			quxiaoEvent(id, ite) {
				console.log('quxiaoEventquxiaoEvent', id, ite)
				this.modalTitle = '是否驳回？'
				this.show = true
				this.work_id = id
			},
			quxiaoEvents(id, ite) {
				// uni.navigateTo({
				// 	url:'/pagesA/index/toSop?item?'+ JSON.stringify(ite)
				// })
				// return
				console.log('quxiaoEventquxiaoEvent', id, ite)
				// this.modalTitle = '是否处理？'
				// this.showS = true
				this.work_id = id
				this.showCL = true
			},
			quxiaoEventss(id, ite){
				this.modalTitle = '是否处理？'
				this.showS = true
				this.work_id = id
			},
			tiemEvent() {
				this.showCLTime = !this.showCLTime
			},
			// inviteSureEvnet
			async inviteSureEvnet() {
				const {
					data
				} = await this.$request(this.$Api.indexsTime, {
					work_id: this.work_id,
					time:this.time,
					remark: this.remark
				}, "POST")
				if (data.code !== 0) return
				this.showCL = false
				// this.confirm()
			},
			confirmTime(e) {
				console.log(e);
				this.time = e[0]
				this.showCLTime = !this.showCLTime
			},
			pjshowEvent(id, ite) {
				this.pjshow = true
				this.work_id = id
			},
			cancelEvent() {
				this.show = false
				this.showS = false
			},
			// 取消
			async confirm() {
				if (this.showS || this.showCL) {
					var api = ''
					if (this.userStatus == 1) {
						api = this.$Api.workCancel
					} else {
						api = this.$Api.indexsDeal
					}
					const {
						data
					} = await this.$request(api, {
						work_id: this.work_id
					}, "POST")
					if (data.code !== 0) return
					this.showS = false
					this.$emit('upData')
				} else {
					const {
						data
					} = await this.$request(this.$Api.indexsCancel, {
						work_id: this.work_id
					}, "POST")
					if (data.code !== 0) return
					this.show = false
					this.$emit('upData')
				}
			},

			// indexsExchange 转交
			zjEvent(id, ite) {
				console.log('froolShowfroolShow', )
				this.froolShow = true
				this.work_id = id
			},
			async FroolConfirm(e) {
				var params = {
					storey_id: e.storey_id,
					floor_id: e.floor_id,
					work_id: this.work_id
				}
				const {
					data
				} = await this.$request(this.$Api.indexsExchange, params, "POST")
				if (data.code !== 0) return
				this.$emit('upData')
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			},
			async sendEvnet() {
				const {
					data
				} = await this.$request(this.$Api.workPoint, {
					work_id: this.work_id,
					point: this.point

				}, "POST")
				if (data.code !== 0) return
				this.pjshow = false
				this.$emit('upData')
			},
		}
	}
</script>

<style lang="less">
	.invite_cont_items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		width: 100%;
		height: 70rpx;
		background: #F5F5F5;
		padding: 0 36rpx 0 24rpx;
		box-sizing: border-box;
		color: #666666;
	}

	.invite_cont_time {
		font-size: 32rpx;
		padding: 26rpx 0 36rpx 0;
	}

	.invite_cont_yy {
		width: 100%;
		height: 174rpx;
		background: #F5F5F5;
		font-size: 28rpx;
		padding: 16rpx 22rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
		color: #666666;

		textarea {
			height: 100%;
		}
	}

	.invite_cont_btn {
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		background: #9013FE;
		margin-top: 46rpx;
		z-index: 999;
	}


	.pagesListcont {
		.listItems {
			width: 100%;
			min-height: 122rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 20rpx auto 0 auto;
			padding: 0 40rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #000;

			.listItems_btn {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				height: 120rpx;

				.btn {
					width: 164rpx;
					height: 68rpx;
					background: #FFFFFF;
					border: 2rpx solid #999999;
					margin-left: 26rpx;
					text-align: center;
					line-height: 68rpx;

				}

				.listItems_btn_zj {
					color: #3B7AFF;
					border: 2rpx solid #2D60FF;
				}

				.listItems_btn_cl {
					color: #fff;
					border: 2rpx solid #2D60FF;
					background: #2D60FF;
				}

			}

			.listItems_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 108rpx;
				width: 100%;
			}

			.listItems_title_right {
				color: #FF1D1D;
			}

			.listItems_cont {
				p {
					color: #666;
					font-size: 28rpx;
					margin-bottom: 14rpx;
				}

				position: relative;

				.itePoint {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
				}
			}

			.listItems_bz {
				min-height: 10rpx;
				padding: 10rpx 0 30rpx 0;
				border-bottom: 1px solid #DDDDDD;
				color: #666;
				font-size: 28rpx;

			}
		}
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}


	.Evaluation_bottom {
		width: 748rpx;
		height: 570rpx;
		background: #FFFFFF;

		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		// position: relative;

		.Evaluation_bottom_title {
			font-size: 40rpx;
			text-align: center;
			width: 100%;
			margin-top: 46rpx;
		}

		.Evaluation_bottom_sub {
			font-size: 28rpx;
			margin-top: 14rpx;
			text-align: center;
			width: 100%;
			color: #999;
		}

		.Evaluation_bottom_line {
			width: 100%;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: 32rpx;
		}

		.Evaluation_bottom_str {
			margin: 32rpx auto 0 auto;
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.Evaluation_bottom_text {
			font-size: 28rpx;
			color: #FCA129;
			text-align: center;
			margin-top: 40rpx;
		}

		.Evaluation_bottom_btn {
			position: fixed;
			z-index: 1;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 88rpx;
			background: #9013FE;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.Evaluation_bottoms {
		margin-bottom: 94rpx;
	}

	.masks {
		background: rgba(0, 0, 0, .6);
	}
</style>